<template>
	<view class="control">
		<view class="concent">
			<!-- <view class="nav">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
			</view> -->
			<view class="top">
				<!-- <image mode="widthFix"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6a34ad3e8a24a341cd3ea964c41ebf4623cdd884.png">
				</image> -->
				<view class="info">
					<view class="info-3">
						实付金额
					</view>
					<view class="info-1">
						￥<text style="font-size: 84rpx;">{{amount}}</text>
					</view>
					<view class="info-2" v-if="typetime">剩余支付时间：{{payWaitTimes}}</view>
					<view class="info-2" style="margin-left: 50rpx;" v-if="typetimes">超时付款</view>
				</view>
			</view>

			<!-- <view class="form">
				<radio-group @change='change1'>
					<label class="item flex-align" v-for="(item,index) in payList" :key="index">
						<image mode="aspectFit" :src="item.cover"></image>
						<view class="flex-between item-con">
							<text>{{item.name}}</text>
							<radio :value="index" color=" #4BA677" :checked="index == 0 ? true : false" @change="radioChange(item)" />
						</view>
					</label>
				</radio-group>
			</view> -->
			<view class="zhifu">
				<view class="zhifu_1">
				</view>
				<view class="zhifu_2">
					选择支付方式
				</view>
			</view>
			<view class="form">
				<radio-group @change='change1'>
					<label class="item flex-align" v-for="(item,index) in payList" :key="index">
						<image mode="aspectFit" :src="item.cover"></image>
						<view class="flex-between item-con">
							<view style="display: flex;flex-direction: row; ">{{item.name}}
								<view v-if="item.type == 'balance'"> {{item.vip_balance}}元 </view><text
									v-if="item.discount !='' && item.type == 'balance'">({{item.discount}}折)</text>
							</view>
							<radio :value="index" color=" #4BA677" :checked="index == 0 ? true : false"
								:disabled="item.type == 'balance' ? item.vip_balance == 0 ? true : false :false"
								@change="radioChange(item)" />
						</view>
					</label>
				</radio-group>
			</view>
			<!-- <view class="" style="margin-top: 40rpx;"  v-if="list1 != ''">
				<u-swiper :list="list1" radius = 0></u-swiper>
			</view -->
		</view>
		<view class="footer">
			<view class="btn" @click="$noMultipleClicks(href)" v-if="btn_if">确认支付¥{{amount}}</view>
			<view class="btn_t" v-else>确认支付¥{{amount}}</view>
		</view>
		<payKeyboard v-if="showKeyBoard" title="" @success="enterSuccess" @close="close"></payKeyboard>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const venues = require("@/api/venues/venues.js");
	const person = require("@/api/personal/index.js");
	const index = require("@/api/index/index.js");
	import payKeyboard from '../../../components/mi-payKeyboard/mi-payKeyboard.vue';
	export default {
		components: {
			QSNavbar,
			payKeyboard
		},
		data() {
			return {
				showKeyBoard: false,
				noClick: true,
				btn_if: true, //支付按钮切换
				list1: [],
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '收银台',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				amount: '0.00',
				// payWaitTimes: '23:12:11',
				payWaitTimes: '',
				venue_id: '',
				payList: [],
				payChoose: {},
				order_id: '',
				orderid: '',
				amountValue: '',
				project: '',
				order_type: '',
				classNum: 0,
				goods_id: '',
				timer: null, //重复执行
				typetime: true,
				typetimes: false,
				belong: "",
				payWait: null,
				projectArr: [],
				card_id: '',
				coupon_id: '',
				money: '',
				am_ount: '',
				panduan: 0,
				pay_id: ''
			}
		},
		// watch:{
		// 	payChoose:{
		// 		handler(newName, oldName) {
		// 		        },
		// 		        immediate: true,
		// 		        deep: true
		// 	}
		// },
		onLoad(options) {
			this.goods_id = options.goods_id
			this.belong = options.belong
			this.order_id = options.order_id
			this.orderid = options.orderid
			this.amountValue = options.amountValue
			this.project = options.project
			this.order_type = options.order_type
			this.classNum = options?.classNum
			this.amount = options.amount
			this.money = options.amount
			this.venue_id = options.venue_id
			this.typetime = options.typetime
			this.chaoshitype = options.chaoshitype
			this.card_id = options.card_id
			this.coupon_id = options.coupon_id
			this.plate_no = options.plate_no
			this.order_item_id = options.order_item_id
			let that = this

			let params = {
				venue_id: options.venue_id,
				project_id: getApp().globalData.projectId,
				appid: this.$https.weixinAppId,
				order_id: options.orderid,
				open_id: uni.getStorageSync('openid'),
				coupon_id: this.coupon_id

			}
			venues.getVenuePay(params).then(res => {
				if (res.code == 1) {
					that.payList = res.data.payment
					that.payWaitTimes = res.data.else_time
					// this.payList = res.data
					that.paytime()
					// that.payList.forEach((item, index) => {
					// 	item.content = JSON.parse(item.content)
					// 	if (that.coupon_id == '') {
					// 		if (item.type == 'balance') {
					// 			that.amount = item.afterDiscountMoney.price
					// 			that.am_ount = item.afterDiscountMoney.price
					// 		}
					// 	}

					// })
				} else {
					uni.showToast({
						title: res.info,
						icon: 'none',
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			})
			// this.payChoose = this.payList[0]
			// this.getVenuePay()
		},
		onShow() {

		},
		// 一般页面用onUnload
		onUnload() {
			let that = this;
			clearInterval(that.payWait)
			that.payWait = null;
		},
		// tabbar页面用onHide
		onHide() {
			let that = this;
			clearInterval(that.payWait)
			that.payWait = null;
		},
		methods: {
			// 输入正确的回调
			async enterSuccess(password) {
				var that = this;
				if (this.order_type == 11) {
					// 查询停车费-余额输入密码发起支付
					let data = {
						open_id: uni.getStorageSync('openid'),
						plate_no: this.plate_no,
						id: this.orderid,
						// pay_amount: this.amount,
						// venue_id: this.venue_id,
						project_id: getApp().globalData.projectId,
						order_id: this.order_id,
						pay_type: 'yePay',
						pay_pwd: password,
						app_id: this.$https.weixinAppId,
						order_item_id: this.order_item_id
					}
					let res = await index.platepay(data)
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: res.info,
							icon: 'none',
							mask: true
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						}, 500)
						that.orderQuery()
						this.showKeyBoard = false
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.info,
							icon: 'none',
							mask: true
						})
						this.showKeyBoard = true
					}
				} else {
					var nowdate = new Date().valueOf();
					// 其余-余额输入密码发起支付
					uni.showLoading({
						title: "加载中",
						mask: true,
					});
					let params = {
						open_id: uni.getStorageSync("openid"),
						project_id: getApp().globalData.projectId,
						app_id: that.$https.weixinAppId,
						out_trade_no: this.order_id,
						goods_id: this.goods_id,
						transaction_id: 'ZF001',
						add_time: nowdate,
						order_type: this.order_type,
						attach: this.projectArr,
						payer_total: that.amount,
						pay_pwd: password,
						from: 'yePay',
						card_id: this.card_id,
						coupon_id: this.coupon_id,
						is_coupon: this.coupon_id
					};
					let res = await venues.moniPay(params);
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							mask: true
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 2, //返回层数，2则上上页
							})
						}, 500)
						this.orderQuery()
						this.showKeyBoard = false
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.data.res.msg,
							icon: 'none',
							mask: true
						})
						this.showKeyBoard = true
					}
				}
			},
			// 点击[取消] 关闭输入框 的回调
			close() {
				this.showKeyBoard = false
			},
			paytime() {
				if (this.typetime == 1) {
					this.typetime = false
					this.typetimes = true
				} else {
					if (this.amount != '') {
						if (this.chaoshitype == 2) {
							this.payWait = setInterval(() => {
								// this.payWaitTime(this.payWaitTimes)
								if (this.payWaitTimes == '00:00:00') {
									clearInterval(this.payWait)
									// uni.navigateBack({
									// 	delta: 2, //返回层数，2则上上页
									// })
									uni.showToast({
										title: '支付超时',
										icon: 'none',
										mask: true
									})
									setTimeout(() => {
										uni.navigateTo({
											url:'/pages/cars-info/cars_parking'
										})
									}, 500)
									return
								}
								if (this.payWaitTimes > '0') {
									this.payWaitTime(this.payWaitTimes)
								}
								if (this.payWaitTimes <= 0) {
									clearInterval(this.payWait)
									setTimeout(() => {
										uni.navigateTo({
											url:'/pages/cars-info/cars_parking'
										})
									}, 500)
									return uni.showToast({
										title: '支付超时',
										icon: 'none',
										mask: true
									})
								}
							}, 1000)
							// this.payWait =payWait
						}
					}
				}
			},
			// 获取我的待付款订单
			async getChannelBanner() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				};
				let res = await person.getChannelBanner(postData);
				if (res.code == 1) {
					this.list1 = res.data.result.channel_banner_pay
				}
			},
			// 获取支付方式
			async getVenuePay() {
				let params = {
					venue_id: options.venue_id,
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					order_id: options.orderid,
					open_id: uni.getStorageSync('openid'),
					coupon_id: this.coupon_id

				}
				let res = await venues.getVenuePay(params)
				if (res.code == 1) {
					this.payList = res.data.payment
					this.payWaitTimes = res.data.else_time
					// this.payList = res.data
					this.payList.forEach((item, index) => {
						item.content = JSON.parse(item.content)
					})
				}
			},
			// 支付等待时间动态变化
			payWaitTime(time) {
				let arr = time.split(':')
				let hour = arr[0]
				let min = arr[1]
				let sec = arr[2]
				let sec_num = parseInt(sec)
				sec_num--
				if (sec_num < 0) {
					sec_num = 59
					min--
					if (min < 0) {
						min = 59
						hour--
						if (hour < 0) {
							hour = 23
						}
					}
				}
				sec = sec_num.toString()
				if (sec.length == 1) {
					sec = '0' + sec
				}
				min = min.toString()
				if (min.length == 1) {
					min = '0' + min
				}
				hour = hour.toString()
				if (hour.length == 1) {
					hour = '0' + hour
				}
				this.payWaitTimes = hour + ':' + min + ':' + sec
			},

			async href() {
				let that = this
				// 票卡
				// 微信
				// 支付
				if (this.panduan == 0) {
					this.pay_id = this.payList[0].id
					this.payChoose = this.payList[0]
					for (let i = 0; i < this.payList.length; i++) {
						if (this.payList[i].checked) {
							pay_id = this.payList[i].id
							this.payChoose = this.payList[i]
							break
						}
					}
				}
				if (this.pay_id == '') {
					return uni.showToast({
						title: '请选择支付方式',
						icon: 'none',
						mask: true
					})
				}
				if (this.payChoose.type == 'sao_bei' || this.payChoose.type == 'jianhang_ccb' || this
					.payChoose.type == 'chinaums') {
					if (this.order_type == 11) {
						// 银商支付chinaums
						// 查询停车费-余额输入密码发起支付
						let data = {
							open_id: uni.getStorageSync('openid'),
							plate_no: this.plate_no,
							id: this.orderid,
							project_id: getApp().globalData.projectId,
							order_id: this.order_id,
							pay_type: 'unionPay',
							app_id: this.$https.weixinAppId,
							order_item_id: this.order_item_id,
							pay_id: this.payChoose.id,
						}
						let result = await index.platepay(data)
						if (result.code == 1) {
							let paymentData = result.data.data
							uni.requestPayment({
								timeStamp: paymentData.timestamp,
								nonceStr: paymentData.noncestr,
								package: paymentData.package,
								signType: paymentData.signType,
								paySign: paymentData.paySign,
								success: (result) => {
									this.btn_if = false
									setTimeout(() => {
										uni.navigateTo({
											url:'/pages/cars-info/cars_parking'
										})
									}, 500)
									that.orderQuery()
								},
								fail: (result) => {
									if (result.errMsg = 'requestPayment:fail cancel') {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1, //返回层数，2则上上页
											})
										}, 500)
									}
								},
								complete: () => {
									this.loading = false;
								}
							})
						}
					} else {
						let that = this
						// 扫呗
						let res = await venues.WxMiniAddOrder({
							app_id: this.$https.weixinAppId,
							project_id: getApp().globalData.projectId,
							open_id: uni.getStorageSync('openid'),
							order_type: this.order_type,
							pay_money: this.amount,
							order_number: this.order_id,
							pay_id: this.payChoose.id,
							orderid: this.orderid,
							goods_id: this.goods_id
						})
						let paymentData = res.data
						uni.requestPayment({
							timeStamp: paymentData.timestamp,
							nonceStr: paymentData.noncestr,
							package: paymentData.package,
							signType: paymentData.signType,
							paySign: paymentData.paySign,
							success: (res) => {
								this.btn_if = false
								setTimeout(() => {
									uni.navigateBack({
										delta: 1, //返回层数，2则上上页
									})
								}, 500)
								that.orderQuery()
							},
							fail: (res) => {
								if (res.errMsg = 'requestPayment:fail cancel') {
									setTimeout(() => {
										uni.navigateTo({
											url:'/pages/cars-info/cars_parking'
										})
									}, 500)
								}
							},
							complete: () => {
								this.loading = false;
							}
						})
					}
				} else if (this.payChoose.type == 'balance') {
					let that = this
					this.showKeyBoard = true
				}

			},

			change1(e) {

				this.panduan = 1
				let that = this
				let i = e.detail.value
				const item = this.payList[i]
				if (item) {
					this.payChoose = item
					this.payList[i].checked = true
				} else {
					this.payChoose = {}
				}
				if (that.coupon_id == '') {
					if (that.payChoose.type == 'balance') {
						that.getVipPrice()
						that.pay_id = that.id
						// uni.showToast({
						// 	title: "优惠券与集团会员折扣不可同时使用",
						// 	icon: "none",
						// });
					} else {
						that.amount = that.money;
						that.pay_id = that.id
					}
				} else {
					that.pay_id = that.id
					if (that.payChoose.type == 'balance') {
						uni.showToast({
							title: "优惠券与集团会员折扣不可同时使用",
							icon: "none",
						});
					}
				}
			},

			// 获取账户余额支付折扣
			async getVipPrice() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				let postData = {
					order_id: this.orderid,
					open_id: uni.getStorageSync('openid'),
					coupon_id: this.coupon_id
				};
				let res = await venues.getVipPrice(postData);
				if (res.code == 1) {
					uni.hideLoading();
					this.amount = res.data.price
					
				}
			},
			orderQuery() {
				let that = this
				let datas = {
					order_id: that.orderid,
				};
				venues.orderQuery(datas).then(result => {
					if (result.code == 1) {

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background: #EDF5F5;

		.concent {
			width: 100%;
			height: auto;
			background-color: #fff;

			.top {
				// position: relative;

				// >image {
				// 	width: 100%;
				// }

				.info {
					// position: absolute;
					// left: 0;
					// right: 0;
					// margin: auto;
					// top: 0;
					width: fit-content;
					height: fit-content;
					// bottom: 0;
					border-bottom: 1rpx solid #DBDBDB;
					height: 314rpx;
					color: #000000;
					width: 100%;
					display: flex;
					flex-direction: column;
					// justify-content: center;
					align-items: center;
					padding-top: 60rpx;

					.info-1 {
						font-size: 40rpx;
						color: #000000;
						text-align: center;

						text {
							font-size: 55rpx;
							font-weight: bold;
							font-family: DIN-Bold;
						}
					}

					.info-3 {
						font-size: 26rpx;
						color: #333333;
					}

					.info-2 {
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
						margin-top: 20rpx;
					}
				}
			}

			.nav {
				position: absolute;
				top: 0;
				z-index: 3;
				width: 100%;
			}

			.form {
				box-sizing: border-box;

				.item {
					padding: 0rpx 30rpx;
					background-color: white;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}

					.item-con {
						flex: 1;
						width: 0;
						font-size: 26rpx;
						padding: 40rpx 0;
						color: #333333;
						border-bottom: 1px solid #EFEFEF;

						.pirce {
							color: #888888;
						}
					}

					radio {
						transform: scale(0.8);
					}
				}
			}

			.zhifu {
				height: 40rpx;
				font-weight: 500;
				line-height: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 20rpx;
				margin-top: 40rpx;

				.zhifu_1 {
					width: 6rpx;
					height: 24rpx;
					background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
					border-radius: 12rpx;
				}

				.zhifu_2 {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: center;
					margin-left: 10rpx;
				}
			}
		}

		.footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx 60rpx 30rpx;
			// background-color: white;

			.btn {
				text-align: center;
				width: 100%;
				padding: 22rpx 0;
				// background: linear-gradient(0deg, #FC484C, #F72746);
				border-radius: 50rpx;
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%);
				// border-radius: 19px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.btn_t {
				text-align: center;
				width: 100%;
				padding: 22rpx 0;
				background: linear-gradient(0deg, #b6b6b6, #b6b6b6);
				border-radius: 19px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>